/**
 * <pre>
 *     author : XML
 *     e-mail : 946891360@qq.com
 *     time   : 2019/06/10
 *     version:
 *     desc   :
 * </pre>
 */

import React, {Component} from 'react';
import {Button, StyleSheet, TouchableOpacity, Text, View} from 'react-native';
import actions from "../action";
import {connect} from "react-redux";
import NavigationUtil from "../navigator/NavigationUtil";
import NavigationBar from '../common/NavigationBar'
import Feather from 'react-native-vector-icons/Feather'
import Ionicons from 'react-native-vector-icons/Ionicons'

const THEME_COLOR = '#678';

class MyPage extends Component<Props> {

    getRightButton() {
        return <View style={{flexDirection: 'row'}}>
            <TouchableOpacity
                onPress={() => {
                }}
            >
                <View style={{padding: 5, marginRight: 8}}>
                    <Feather
                        name={'search'}
                        size={24}
                        style={{color: 'white'}}
                    />
                </View>
            </TouchableOpacity>
        </View>
    }

    getLeftButton() {
        return <TouchableOpacity
            style={{padding: 8, paddingLeft: 8}}
            onPress={() => {
            }}
        >
            <Ionicons
                name={'ios-arrow-back'}
                size={26}
                style={{color: 'white'}}
            />
        </TouchableOpacity>
    }

    render() {
        const {navigation} = this.props;
        let statusBar = {
            backgroundColor: THEME_COLOR,
            barStyle: 'light-content'
        };
        let navigationBar =
            <NavigationBar
                title={'我的'}
                statusBar={statusBar}
                style={{backgroundColor: THEME_COLOR}}
                rightButton={this.getRightButton()}
                leftButton={this.getLeftButton()}
            />;

        return (
            <View style={styles.container}>
                {navigationBar}
                <Button
                    style={{margin: 10}}
                    title={'改变主题颜色'}
                    onPress={() => {
                        this.props.onThemeChange('#906')
                    }}
                />

                <Button
                    style={{margin: 10}}
                    title={'跳转到详情页'}
                    onPress={() => {
                        NavigationUtil.goPage({navigation: navigation}, "DetailPage")
                    }}
                />

                <Button
                    style={{margin: 10}}
                    onPress={() => {
                        NavigationUtil.goPage({navigation: navigation}, "FetchDemoPage")
                    }}
                    title={'Fetch 使用'}
                />

                <Button
                    style={{margin: 10}}
                    onPress={() => {
                        NavigationUtil.goPage({navigation: navigation}, "AsyncStorageDemoPage")
                    }}
                    title={'AsyncStorage 使用'}
                />

                <Button
                    style={{margin: 10}}
                    onPress={() => {
                        NavigationUtil.goPage({navigation: navigation}, "DataStoreDemoPage")
                    }}
                    title={'离线缓存框架 使用'}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
});
const mapStateToProps = state => ({});

const mapDispatchToProps = dispatch => ({
    onThemeChange: theme => dispatch(actions.onThemeChange(theme))
});

export default connect(mapStateToProps, mapDispatchToProps)(MyPage)